<template>
    <div class="header">
        <div class="header-left">
            <span class="iconfont">&#xe601;</span>
        </div>
        <span class="iconfont search-icon">&#xe616;</span>
        <input class="header-input" contenteditable=true placeholder="输入城市/景点/游玩/主题">
        <router-link to='/city'>
            <div class="header-right">{{this.$store.state.city}}<span class="iconfont arrow-icon">&#xe600;</span></div>
        </router-link>
    </div>
</template>
<script>
export default {
    name:'HomeHeader'
}
</script>
<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .header
        display:flex
        position:relative
        height:$headerHeight
        background :$bgColor
        line-height:$headerHeight
        color:#fff
        .header-left
            width:.64rem
            float:left
            padding-left:.2rem
        .header-input
            flex:1
            height:.64rem 
            margin-top:.08rem 
            margin-left:.2rem
            background:#fff
            border-radius:.1rem 
            line-height:.64rem 
            text-indent:.46rem
            border:none;
            outline:none;
        .header-right
            width:1.24 rem 
            float:left
            text-align:center
            .arrow-icon
                font-size:.2rem
        .search-icon
            position:absolute 
            left:.9rem
            z-index:999
            color:#000
</style>